<ui:composition
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">

    

        <p:panel id="pnlLogin"  header="#{msgs.loginUsuario}" style="width: 500px; margin: auto; margin-top: 20px;">

            <p:messages id="msgs" showDetail="true"/>
            <h:panelGroup rendered="#{usuarioSession.muestroMensajeExpirado}">
                <div class="ui-messages ui-widget">
                    <div class="ui-messages-info ui-corner-all">
                        <span class="ui-messages-info-icon"></span>
                        <ul>
                            <li>
                                <span class="ui-messages-error-summary">Su sesión en nuestra plataforma ha finalizado</span>
                            </li>
                            <li>
                                <span class="ui-messages-error-summary">Vuelva a ingresar por favor</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </h:panelGroup>

            <h:panelGrid columns="2">

                <h:graphicImage value="/resources/imagenes/login.png" height="75" width="75" />

                <h:panelGrid columns="2">
                    <h:outputText value="#{msgs.usuario}:" />
                    <p:inputText id="txtUsuario" value="#{usuarioSession.usuario.usuario}"
                                 required="true"  requiredMessage="#{msgs.campoObligatorio}" size="30"  >
                        <f:validateLength minimum="4" maximum="20" />
                    </p:inputText>


                    <h:outputText id="lblContrasenia" value="#{msgs.password}:" />
                    <p:password value="#{usuarioSession.usuario.password}" feedback="false"
                                maxlength="20" required="true"
                                requiredMessage="#{msgs.campoContraseniaObligatorio}" size="30"  />

                    <p:commandButton id="btnLogin" value="#{msgs.ingresar}" action="#{usuarioSession.login}" ajax="false"
                                     onclick="ajaxStatus3.show()"/>
                    <p:commandButton value="#{msgs.reset}" type="reset" immediate="true" />

                </h:panelGrid>


            </h:panelGrid>
        </p:panel>

        <p:dialog widgetVar="ajaxStatus3" showHeader="false" width="200" resizable="false"  closable="false">
            <div style="text-align: center">

                <h:panelGrid columns="2">

                    <h:panelGroup>
                        <p:graphicImage value="/resources/imgAjax/ajax-loader-II.gif" />
                        <p:spacer width="10"/>
                    </h:panelGroup>

                    <h:panelGroup>
                        <h:outputText value="Aguarde por favor..." />
                    </h:panelGroup>

                </h:panelGrid>
            </div>
        </p:dialog>
    
    <!--
    <h:form id="formulario">
        <p:panel header="#{msgs.loginUsuario}" style="width: 500px; margin: auto; margin-top: 20px;">

            <p:messages id="msgs" showDetail="true"/>
            <h:panelGrid columns="2">

                <h:graphicImage value="/resources/imagenes/login.png" height="75" width="75" />

                <h:panelGrid columns="2">
                    <h:outputText value="#{msgs.usuario}:" />
                    <p:inputText id="txtUsuario" value="#{usuarioSession.usuario.usuario}"
                                 required="true"  requiredMessage="#{msgs.campoObligatorio}" size="30"  >
                        <f:validateLength minimum="4" maximum="20" />
                    </p:inputText>


                    <h:outputText id="lblContrasenia" value="#{msgs.password}:" />
                    <p:password value="#{usuarioSession.usuario.password}" feedback="false"
                                maxlength="20" required="true"
                                requiredMessage="#{msgs.campoContraseniaObligatorio}" size="30"  />

                    

                </h:panelGrid>                

            </h:panelGrid>
            <div style="text-align: center">
                        <p:commandButton value="#{msgs.ingresar}" action="#{usuarioSession.login}" ajax="false" />
                        <p:commandButton value="#{msgs.reset}" type="reset" immediate="true" />
                    </div>
        </p:panel>
    </h:form>

    -->
</ui:composition>